<template>
  <div>
    <el-button @click="goBack" type="primary" style="margin-top: 10px; margin-left: 20px;">返回</el-button>
    <page-main>
      <el-descriptions class="margin-top" title="隐患详情" :column="2" border>
        <!-- <template #extra>
          <el-button
            type="primary"
            size="small"
            @click="dialogVisibleExamine = true"
            >点击审核</el-button
          >
        </template> -->
        <el-descriptions-item style="width: 10%;" width="15%">
          <template #label>
            <i class="el-icon-user"></i>
            隐患描述
          </template>
          {{ dangerInfo.check_remark }}
        </el-descriptions-item>
        <el-descriptions-item width="15%">
          <template #label>
            <i class="el-icon-mobile-phone"></i>
            发现时间
          </template>
          {{ $getDateTime(dangerInfo.check_time) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-mobile-phone"></i>
            隐患来源
          </template>
          {{
            dangerInfo.danger_source == 1
              ? '公众'
              : dangerInfo.danger_source == 2
              ? '监管机构'
              : dangerInfo.danger_source == 3
              ? '维保单位'
              : '社会单位'
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-location-outline"></i>
            隐患位置
          </template>
          {{ dangerInfo.address }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-location-outline"></i>
            点位名称
          </template>
          {{ dangerInfo.point_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-location-outline"></i>
            单位名称
          </template>
          {{ dangerInfo.unit_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-tickets"></i>
            隐患可能导致的事故后果
          </template>
          <el-tag size="small" v-for="(item, index) in dangerInfo.effect" :key="index" type="warning">{{
            item
          }}</el-tag>
          <!-- {{dangerInfo}} -->
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-office-building"></i>
            隐患等级
          </template>
          {{ dangerInfo.danger_level }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-office-building"></i>
            隐患整改状态
          </template>
          <!-- {{dangerInfo.status==1?'待整改':dangerInfo.status==2?'待审核'}} -->
          <el-tag v-if="dangerInfo.status == 3">已整改</el-tag>
          <el-tag v-else-if="dangerInfo.status == 2" type="warning">待审核</el-tag>
          <el-tag v-else type="danger">待整改</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-location-outline"></i>
            处理结果备注
          </template>
          {{ dangerInfo.result_remark }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-office-building"></i>
            检查照片
          </template>
          <el-image
            :src="upDataUrl + item"
            fit="cover"
            :style="`width: 100px;height:100px;margin-right:10px`"
            :preview-src-list="[upDataUrl + item]"
            v-for="(item, index) in dangerInfo.check_images"
            :key="index"
          >
            <template #error>
              <div class="image-slot">
                <svg-icon name="image-load-fail" />
              </div>
            </template>
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-office-building"></i>
            检查视频
          </template>
          <el-button
            type="primary"
            size="small"
            @click="openVideo(item)"
            v-for="(item, index) in dangerInfo.check_videos"
            :key="index"
            >播放视频{{ index + 1 }}</el-button
          >
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-office-building"></i>
            处理结果照片
          </template>
          <el-image
            :src="upDataUrl + item"
            fit="cover"
            :style="`width: 100px;height: 100px;margin-right:10px`"
            :preview-src-list="[upDataUrl + item]"
            v-for="(item, index) in dangerInfo.result_images"
            :key="index"
          >
            <template #error>
              <div class="image-slot">
                <svg-icon name="image-load-fail" />
              </div>
            </template>
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <i class="el-icon-office-building"></i>
            处理结果视频
          </template>
          <el-button
            type="primary"
            size="small"
            @click="openVideo(item)"
            v-for="(item, index) in dangerInfo.result_videos"
            :key="index"
            >播放视频{{ index + 1 }}</el-button
          >
        </el-descriptions-item>
      </el-descriptions>

      <div class="block">
        <h3>隐患处理记录</h3>
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in dangerLogs"
            :key="index"
            :timestamp="item.create_time"
            placement="top"
          >
            <el-card>
              <p><span class="left">状态描述：</span>{{ item.status_remark }}</p>
              <p>
                <span class="left">处理人：</span>{{ item.user_name }} 提交于
                {{ item.create_time }}
              </p>
              <p><span class="left">处理人电话：</span>{{ item.user_mobile }}</p>
              <p>
                <span class="left">来源：</span
                >{{
                  item.danger_source == 1
                    ? '公众'
                    : item.danger_source == 2
                    ? '监管机构'
                    : item.danger_source == 3
                    ? '维保单位'
                    : '社会单位'
                }}
              </p>
              <p><span class="left">整改备注：</span>{{ item.remarks }}</p>
              <div class="center" style="margin-bottom: 15px;">
                <span class="left">检查照片：</span>
                <el-image
                  :src="upDataUrl + imgItem"
                  fit="cover"
                  :style="`width:50px;height:50px;margin-right:10px`"
                  :preview-src-list="[upDataUrl + imgItem]"
                  v-for="(imgItem, index2) in item.images"
                  :key="index2"
                >
                  <template #error>
                    <div class="image-slot">
                      <svg-icon name="image-load-fail" />
                    </div>
                  </template>
                </el-image>
              </div>
              <div class="center">
                <span class="left">检查视频：</span>
                <template>
                  <i class="el-icon-office-building"></i>
                  检查视频
                </template>
                <el-button
                  type="primary"
                  size="small"
                  @click="openVideo(mvItem)"
                  v-for="(mvItem, index2) in item.videos"
                  :key="index2"
                  >播放视频{{ index2 + 1 }}</el-button
                >
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <!-- 视频弹窗 -->
      <el-dialog title="检查视频" v-model="dialogVisibleVideo" width="30%" @close="playUrl = ''">
        <div>
          <video width="320" height="240" controls="controls" v-if="playUrl">
            <source :src="playUrl" type="video/ogg" />
            <source :src="playUrl" type="video/mp4" />
            <source :src="playUrl" type="video/webm" />
            <object :data="playUrl" width="320" height="240"></object>
          </video>
        </div>
      </el-dialog>
      <!-- 审核弹窗 -->
      <el-dialog title="审核隐患" v-model="dialogVisibleExamine" width="60%" destroy-on-close>
        <el-form label-width="120px" :model="examineForm" :rules="examineRules" ref="examineForm">
          <el-form-item label="是否通过审核">
            <el-radio-group v-model="examineForm.status">
              <el-radio :label="1">审核不通过</el-radio>
              <el-radio :label="3">审核通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="	审核描述" prop="result_remark">
            <el-input placeholder="请输入审核描述" v-model="examineForm.result_remark"></el-input>
          </el-form-item>
          <el-form-item label="	审核照片">
            <div style="display: flex;">
              <el-upload
                class="upload-demo"
                :action="upDataUrl + '/unit/upload/upload'"
                :on-change="handleChange"
                :file-list="fileList"
                :headers="upLoadImgHeader"
                :data="upLoadImgData"
                limit="1"
                :on-exceed="onExceed"
                :on-success="imgUpSuccess"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="	审核视频">
            <el-upload
              class="upload-demo"
              drag
              :action="upDataUrl + '/unit/upload/upload'"
              multiple
              :data="upLoadFlieData"
              :headers="upLoadImgHeader"
              :before-upload="beforeUploadVideo"
              limit="1"
              :on-exceed="onExceed"
              :on-success="onSuccess"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <template #tip>
                <div class="el-upload__tip">只能上传以下格式：mp4/ogg/flv/avi/wmv/rmvb</div>
              </template>
            </el-upload>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisibleExamine = false">取 消</el-button>
            <el-button type="primary" @click="examine('examineForm')">提交</el-button>
          </span>
        </template>
      </el-dialog>
    </page-main>
  </div>
</template>
<script>
import { ElMessage } from 'element-plus'
export default {
  props: {
    src: {
      type: String,
      required: true
    },
    width: {
      type: [Number, String],
      default: ''
    },
    height: {
      type: [Number, String],
      default: ''
    },
    danger_id: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      //审核参数
      examineForm: {
        id: '',
        result_images: '',
        status: 1,
        result_remark: '',
        result_videos: ''
      },
      upDataUrl: import.meta.env.DEV ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
      upLoadImgData: {
        type: 'image'
      },
      upLoadFlieData: {
        type: 'file'
      },
      examineRules: {
        result_remark: [{ required: true, trigger: 'blur', message: '请输入简称' }]
      },
      dangerInfo: {
        // id: 12,
        // unit_id: 1,
        // point_id: 1,
        // danger_source: 1,
        // check_remark: "通道内堆放杂物4",
        // check_time: 1555555555,
        // address: "消防通道右侧",
        // effect: ["车辆伤害", "机械伤害"],
        // check_images: [
        //   "https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64",
        //   "https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64",
        //   "https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64",
        // ],
        // check_videos: [
        //   "https://www.w3school.com.cn/i/movie.ogg",
        //   "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
        // ],
        // danger_level: "一般隐患",
        // status: 1,
        // result_images: null,
        // result_videos: null,
        // result_remark: "",
        // create_time: 1631093414,
        // update_time: 0,
        // point_name: "楼梯口",
        // unit_name: "三台县社非得分利院",
      },
      dialogVisibleVideo: false,
      dialogVisibleExamine: false,
      // 视频播放地址
      playUrl: '',
      // 隐患处理记录
      dangerLogs: []
    }
  },
  created() {
    console.log(this.$route.query.id)
    this.examineForm.id = this.$route.query.id || this.danger_id
    this.getDangerLogs()
    this.getDetail()
    // for (const i of this.dangerLogs) {
    //   i.create_time = this.ormatDate(i.create_time);
    // }
  },
  computed: {
    upLoadImgHeader() {
      return {
        'A-Token': this.$store.state.user.a_token,
        'U-Token': this.$store.state.user.u_token
      }
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    getDangerLogs() {
      this.$api
        .get('/unit/Danger/Logs', {
          params: {
            danger_id: this.$route.query.id || this.danger_id
          }
        })
        .then((res) => {
          this.dangerLogs = res.data.list
          for (const i of this.dangerLogs) {
            i.create_time = this.ormatDate(i.create_time * 1000)
          }
        })
        .catch((e) => {})
    },
    onExceed() {
      this.$message({
        showClose: true,
        message: '如需更改，请先删除已上传的',
        type: 'error'
      })
    },
    imgUpSuccess(res) {
      this.examineForm.result_images = res.data.result
    },
    //获取详情
    getDetail() {
      this.$api
        .get('/unit/Danger/Show', {
          params: {
            id: this.$route.query.id || this.danger_id
          }
        })
        .then((res) => {
          this.dangerInfo = res.data
        })
        .catch((e) => {})
    },
    openVideo(url) {
      this.playUrl = url
      this.dialogVisibleVideo = true
    },
    beforeUploadVideo(file) {
      const isLt10M = file.size / 1024 / 1024 < 10
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) == -1) {
        this.$message.error('请上传正确的视频格式')
        return false
      }
      if (!isLt10M) {
        this.$message.error('上传视频大小不能超过10MB哦!')
        return false
      }
    },
    onSuccess(res) {
      this.examineForm.result_videos = res.data.result
    },
    // 提交审核
    examine(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.examineForm.result_images && !this.examineForm.result_videos) {
            ElMessage.warning({
              message: '视频和图片请至少上传一样！',
              type: 'warning'
            })
          } else {
            this.$api
              .post('xf/Danger/Verify', examineForm)
              .then((res) => {
                if (res.code == 200) {
                  this.dialogVisibleExamine = false
                }
              })
              .catch((e) => {})
          }
        } else {
          return false
        }
      })
    },
    // 时间戳转换时间格式
    ormatDate(date) {
      var date = new Date(date)
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      var ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return YY + MM + DD + ' ' + hh + mm + ss
    }
  }
}
</script>

<style lang="scss" scoped>
.el-image {
    border-radius: 5px;
    background-color: #ebeef5;
    box-shadow: 0 0 5px 1px #ccc;
    :v-deep(.el-image__inner) {
        transition: all 0.3s;
        cursor: pointer;
        &:hover {
            transform: scale(1.2);
        }
    }
    :v-deep(.image-slot) {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        color: #909399;
        font-size: 30px;
    }
}
.block {
    margin-top: 50px;
}
.block .center {
    display: flex;
    align-items: center;
}
.block .left {
    display: inline-block;
    width: 120px;
}
</style>
